<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播</title>
    <style>
        .slider{
            width: 500px;
            height: 300px;
            overflow: hidden;
        }
        .slider img{
            width: 500px;
            height: 300px;
            display: none;
        }
        .slider img:first-child{
            display: block;
        }
        .buttons{
            margin-top:10px;
        }
        .buttons button{
            padding:10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="sg/0x300a0a0 (1).jpg" alt="Image1">
        <img src="sg/t01062d39e1f4245bb2.jpg" alt="Image2">
        <img src="sg/t011174ddf5d5c92e3d.jpg" alt="Image3">
        <img src="sg/t0145a0c1b514560a21.jpg" alt="Image4">
        <img src="sg/t01c8cff28632132658.jpg" alt="Image5">
        <img src="sg/t011174ddf5d5c92e3d.jpg" alt="Image6">
        <img src="sg/0x300a0a0 (1).jpg" alt="Image7">
        <img src="sg/t01062d39e1f4245bb2.jpg" alt="Image7">
        <img src="sg/t011174ddf5d5c92e3d.jpg" alt="Image8">
        <img src="sg/0x300a0a0 (1).jpg" alt="Image9">
        <img src="sg/t01062d39e1f4245bb2.jpg" alt="Image10">
        <img src="sg/t011174ddf5d5c92e3d.jpg" alt="Image11">
        <img src="sg/0x300a0a0 (1).jpg" alt="Image12">
        <img src="sg/t01062d39e1f4245bb2.jpg" alt="Image13">
        <img src="sg/t011174ddf5d5c92e3d.jpg" alt="Image14">
    </div>
    <div class="buttons">
        <button id="prevBtn">上一张</button>
        <button id="nextBtn">下一张</button>
    </div>
    <script>
        window.onload = function(){
        //先获取元素
        const slider = document.querySelector('.slider');
        const images = slider.getElementsByTagName('img');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        let currentIndex = 0;

        //显示当前图片
        function showImage(index){
            for(let i = 0; i < images.length; i++){
                images[i].style.display = 'none';
            }
            images[index].style.display = 'block';
        }

        //上一张图片
        prevBtn.addEventListener('click',function(){
            currentIndex--;
            if(currentIndex < 0){
                currentIndex = images.length - 1;
            }
            showImage(currentIndex);
        });

        //下一张图片
        nextBtn.addEventListener('click',function(){
            currentIndex++;
            if(currentIndex >= images.length){
                currentIndex = 0;
            }
            showImage(currentIndex);
        });
    }

        //初始显示第一张图片
        showImage(currentIndex)
    </script>
</body>
</html>